import { Table, Modal ,Button } from 'antd';
import React from 'react'
import axios from 'axios'
import StaffSearch from './StaffSearch'
import './PersonStaff.css'


class PersonStaff extends React.Component {
  constructor() {
    super()
    this.state = {
      data: [],
      count: '',
      email: '',
      phone: '',
      Kuang: '',
      visible: false,
    }
    this.columns = [
      {
        title: '账号',
        dataIndex: 'key',
        key: 'key',
        width: 150,
        align: 'center',
      },
      {
        title: '邮箱地址',
        dataIndex: 'email',
        key: 'email',
        // width: 80,
        ellipsis: true,
        align: 'center',
      },
      {
        title: '电话号码',
        dataIndex: 'phone',
        key: 'phone',
        ellipsis: true,
        align: 'center',
      },
      {
        title: '角色',
        dataIndex: 'position',
        key: 'position',
        ellipsis: true,
        align: 'center',
      },
      {
        title: '状态',
        dataIndex: 'state',
        key: 'state',
        ellipsis: true,
        align: 'center',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        ellipsis: true,
        align: 'center',
        render:()=> 
            <span>
              <Button onClick={()=>this.edit()} className="button">编辑</Button>
              <Button onClick={()=>this.SearchStaff()} className="button">删除</Button>
            </span>
      },
    ];
  }
  countVal = (e) => {
    this.setState({ count: e.target.value })
  }
  SearchStaff = () => {
    console.log(this.state)
    axios({
      url: 'http://123.57.67.148:3000/mock/195/SearchStaffData',
      method: 'post'
    }).then(res => {
      console.log(res)
      let data = res.data.data.filter((item) => {
        item.key = item.id
        delete item.id
        return item
      })
      this.setState({
        data: data
      })
    })
  }
  edit=()=>{
    this.setState({
      visible:true
    });
}
  handleOk = () => {
    // console.log(e);
    this.setState({
      visible: false,
    });
    // if(){}else{} 判断输入的值是不是空
    axios({
      url: 'http://123.57.67.148:3000/mock/195/SearchStaffData',
      method: 'post'
    }).then(res => {
      console.log(res)
      let data = res.data.data.filter((item) => {
        item.key = item.id
        delete item.id
        return item
      })
      this.setState({
        data: data
      })
    })
  };
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  render() {
    let { data } = this.state
    return (
      <div>
        <StaffSearch SearchStaff={this.SearchStaff}
          countVal={this.countVal.bind(this)} />
        <Table pagination={{
          position: ['bottomCenter'],
          defaultPageSize: 3,
          pageSize: 3,
        }} bordered={true} columns={this.columns} dataSource={data}  />
        <Modal
          title="修改员工信息"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          // style={{textAlign:'center'}}
        >
        <div style={{paddingLeft:"100px"}}>
          <span>账号：123165</span>
        </div>
        <div style={{paddingLeft:"100px"}}>
          <span>邮件:</span>
          <input type="text"/>
        </div>
        <div style={{paddingLeft:"100px"}}>
          <span>手机:</span>
          <input type="text"/>
        </div>
        <div style={{paddingLeft:"100px"}}>
          <span>密码:</span>
          <input type="text"/>
        </div>
        </Modal>
      </div>
    )
  }
  componentDidMount() {
    axios({
      url: 'http://123.57.67.148:3000/mock/195/PostStaffsData',
      method: 'post'
    }).then(res => {
      
      let data = res.data.data.filter((item) => {
        item.key = item.id
        delete item.id
        return item
      })
      this.setState({
        data: data
      })
      console.log(res.data.data)
    })
  }
}
export default PersonStaff